<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8";http-equiv="Content-Type" content="text/html">
		<title>首页</title>
		<link type="text/css" rel="stylesheet" href="index.css">
		<link type="text/css" rel="stylesheet" href="playlist.css">
		<link type="text/css" rel="stylesheet" href="mv.css" />
		<link href="startstopgallery.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
	</head>
	<body>
		<!--头部-->
		<div id="header">
			<div class="nav_topbar">
			    <div class="nav_topbar_cont">
			        <ul>
			        	<li><a href="#">我的主页</a></li>
			        <li><a href="#">个人中心</a>
			        		</li><li><a href="#">帮助中心</a></li>
			        </ul>
			        <a class="user_login" href="#"><em></em>用户登录<i class="arrow"></i></a>
					<div style="display:none;" class="user_login_box">
					    <p class="shadow_cover"></p>
					    <div class="user_login_inner">
					        <form class="signin_form"> 
					            <input class="ipt" type="text" value="用户名" name="log"> 
					            <input class="ipt" type="password" value="密码" name="pwd"> 
					            <input name="rememberme" id="rememberme" checked="checked" value="forever" type="checkbox">记住密码
					            <input class="login_btn" type="submit" name="submit" value="登录">
					        </form>
					        <p> 
					            <a href="#"><i class="sign"></i>注册</a> | 
					            <a href="#"><i class="lock"></i>忘记密码？</a>
					        </p>
					    </div>
					</div>
			    </div>
			</div>
		</div>
		<div id="headCont">
		    <div class="main_nav">
		        <div class="logo"><a href="#"><img src="images/logo.jpg" width="192" alt="logo"></a></div>
		        <div class="logoName">
		        	<a href="#"></a>
		        </div>
		        <ul class="navigation" id="main_nav">
					<li>
		            	<a href="index.html" class="on"><span>音乐馆</span><span>音乐馆</span></a>
		            </li>
		            <li>
		            	<a href="recommend.html" class=""><span>推荐</span><span>推荐</span></a>
		            </li>
					<li>
						<a href="playlist.html" class=""><span>分类歌单</span><span>分类歌单</span></a>
					</li>
		            <li>
		            	<a href="mv.html" class=""><span>MV</span><span>MV</span></a>
		            </li>
		            <li>
		            	<a href="my-music.html" class=""><span>我的音乐</span><span>我的音乐</span></a>
		            </li>	 
		        </ul>
		        <div class="user_info">
					<div class="user_photo"><a href="#"><img src="images/tx.jpg" width="40px"; hheight="40px";></a></div>
		            <a class="nikeName" href="#">£夕颜</a>
		            <a class="user_info_list" href="#"><span>34</span><span>歌单</span></a>
		            <a class="user_info_list" href="#"><span>8</span><span>收听</span></a>
		            <a class="user_info_list" href="#"><span>20</span><span>喜欢</span></a>
		        </div>
		    </div>
			<nav class="sub_nav">
				<div class="nav_list">
					<ul>
					    <li>
					    	<a href="#" class="smallogo">
					        	<span class="mini_logo"></span>
					        </a>
					    </li>
					    <li><a href="#" class="home">精选</a></li> 
						<li><a href="#" class="">推荐</a></li> 
						<li><a href="#" class="">排行榜</a></li> 
						<li><a href="#" class="">歌手</a></li> 
						<li><a href="#" class="">MV</a></li> 
					    <!--搜索框-->
					    <div class="search_box">
					        <form role="search" method="get" id="searchform" class="searchform" action="#">
								<input type="submit" value="" class="search_btn" id="searchsubmit">
								<input type="text" class="search" value="搜索好音乐" name="s" id="s">
							</form>
					    </div>             
					</ul>
				</div>
			</nav>
		</div>
		</div>
		<!--轮播图-->
		<div class="main_banner">
		    <div class="main_banner_bg"></div>
		    <div class="main_banner_wrap">
				<canvas id="myCanvas" width="150" height="150" style="left: 1030px; top: 225px;"></canvas>
		        <div class="main_banner_box" id="m_box">
		            <a href="javascript:void(0)" class="banner_btn js_pre">
		                <span class="banner_btn_arrow"><i></i></span>
		            </a>
		            <a href="javascript:void(0)" class="banner_btn btn_next js_next">
		                <span class="banner_btn_arrow" width="700" height="320"><i></i></span>
		            </a>
		            <ul>
		                <li id="imgCard0" style="z-index: 1; opacity: 0; width: 450px; height: 180px; top: 60px; left: 0px;">
		                    <a href="#"><span style="opacity: 0.5;"></span></a>      
		                    <img src="images/carousel_img4.jpg" width="700" height="320" alt="">
		                    <p style="bottom: -50px;">音乐奖揭晓</p>
		                </li> 
		                <li id="imgCard1" style="z-index: 1; opacity: 0; width: 450px; height: 180px; left: 0px; top: 60px;">
		                    <a href="#"><span style="opacity: 0.5;"></span></a>      
		                    <img src="images/lbt1.jpg" width="700" height="320" alt="">
		                    <p style="bottom: -50px;">华晨宇新MV：新世界</p>
		                </li> 
		                <li id="imgCard2" style="z-index: 2; width: 580px; height: 240px; top: 20px; left: 0px; opacity: 1;">
		                    <a href="#"><span style="opacity: 0.5;"></span></a>        
		                    <img src="images/carousel_img1.jpg" width="700" height="320" alt="">
		                    <p style="bottom: -50px;">TFBOYS新歌曲重磅来袭</p>
		                </li> 
		                <li id="imgCard3" style="z-index: 5; width: 670px; height: 280px; top: 0px; left: 255px; opacity: 1;">
		                    <a href="#"><span style="opacity: 0;"></span></a>      
		                    <img src="images/lbt2.jpg" alt="">
		                    <p style="bottom: 0px;">王嘉尔数据专辑单曲</p>
		                </li> 
		                <li id="imgCard4" style="z-index: 1; opacity: 1; width: 580px; height: 240px; left: 600px; top: 20px;">
		                    <a href="#"><span style="opacity: 0.5;"></span></a>      
		                    <img src="images/carousel_img2.jpg" width="700" height="320" alt="">
		                    <p style="bottom: -50px;">BIGBANG酷炫来袭</p>
		                </li> 
		            </ul>
		            <p id="rflt"></p>
		        </div>
		        <!--序列号按钮-->
		        <div class="btn_list">
		            <span class=""></span><span class=""></span><span class=""></span><span class="curr"></span><span class=""></span>        
		        </div>
		    </div>
		</div>
		<div class="container hero-text2">
		     <h2 style="margin-left: 20px; margin-top: 60px;">——官方歌单——</h2>
		</div>
		<div id="services" class="page-section colord">
		  <div class="container">
		    <div class="row"> 
			<ul>
				<li><a href="#" style="margin-left: 80px;"><img src="images/gfgq1.png" width="170px" height="170px"></a></li>
				<li><a href="#" style="margin-left: 46px;"><img src="images/gfgq2.png" width="170px" height="170px "></a></li>
				<li><a href="#" style="margin-left: 46px;"><img src="images/gfgq3.png" width="170px" height="170px"></a></li>
				<li><a href="#" style="margin-left: 46px;"><img src="images/gfgq4.png" width="170px" height="170px"></a></li>
				<li><a href="#" style="margin-left: 46px;"><img src="images/gfgq5.png" width="170px" height="170px"></a></li>
			</ul>
			<ul>
				<li style="margin-top: 10px; margin-left: 80px;">Liquid State厂牌官方精选</li>
				<li style="margin-top: 10px; margin-left: 54px;">电波周放送｜原创新歌精选</li>
				<li style="margin-top: 10px; margin-left: 90px;">环球官方精选</li>
				<li style="margin-top: 10px; margin-left: 130px;">华语| 银河遥想</li>
				<li style="margin-top: 10px; margin-left: 130px;">华纳新歌精选</li>
			</ul>
		    </div>
		  </div>
		</div>
		<div class="cont">
		<h2 style="margin-left: 20px; margin-top: 40px;">——排行榜——</h2>
		</div>
		<!-- 排行榜 -->
		<div class="songs_rcmd_title" style="margin-top: 100px;">
		    <div class="rcmd_left_title rcmd_title">
		        <h3 style="margin-left: 150px;">飙升榜</h3>
	        </div>
		    <div class="rcmd_center_title rcmd_title">
		        <h3 style="margin-left: 150px;">热歌榜</h3>
		    </div>
		    <div class="rcmd_right_title rcmd_title">
		        <h3 style="margin-left: 150px;">新歌榜</h3>
		    </div>
		</div>
		<!--标题 结束-->
		<!--推荐内容 开始-->
		<div class="songs_rcmd" id="songs_rcmd">
		    <div class="songs_rcmd_cont">
		        <ul class="rcmd_left rcmd_cont" id="latest">
					 <li>
		                <a href="#" class="musicName"><i class="first_place">1</i>指纹 – 杜宣达</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
		             <li>
		                <a href="#" class="musicName"><i class="second_place">2</i>STAY – Justin Bieber</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
		            <li>
		                <a href="#" class="musicName"><i class="third_place">3</i>伤心太平洋 – 汪苏泷</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
		            <li>
		                <a href="#" class="musicName"><i>4</i>起风了 – 周深</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
		            <li>
		                <a href="#" class="musicName"><i>5</i>雾里 – 姚六一</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
		            <li>
		                <a href="#" class="musicName"><i>6</i>一路生花 – 温奕心</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
		            <li>
		                <a href="#" class="musicName"><i>7</i>半生雪 – 叶泽浩</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
		            <li>
		                <a href="#" class="musicName"><i>8</i>지나갈 테니 – EXO</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
		            <li>
		                <a href="#" class="musicName"><i>9</i>危险派对 – 王以太/刘至佳</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
		        </ul>
		        <ul class="rcmd_center rcmd_cont" id="popular">
					<li>
		                <a href="#" class="musicName"><i class="first_place">1</i>金玉良缘 – 付雪</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
		            <li>
		                <a href="#" class="musicName"><i class="second_place">2</i>漠河舞厅 – 柳爽</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
		            <li>
		                <a href="#" class="musicName"><i class="third_place">3</i>花海 – 周杰伦</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
		            <li>
		                <a href="#" class="musicName"><i>4</i>路过人间 – 郁可唯</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
		            <li>
		                <a href="#" class="musicName"><i>5</i>白月光与朱砂痣 – 大籽</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
		            <li>
		                <a href="#" class="musicName"><i>6</i>晴天 – 周杰伦</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
		            <li>
		                <a href="#" class="musicName"><i>7</i>踏山河 – 叶泽浩</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
		            <li>
		                <a href="#" class="musicName"><i>8</i>夜曲 – 周杰伦</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
		            <li>
		                <a href="#" class="musicName"><i>8</i>嚣张 – en</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
		        </ul>
		        <ul class="rcmd_right rcmd_cont" id="rank">
					<li>
		                <a href="#" class="musicName">哪吒 – 时代少年团</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
					<li>
		                <a href="#" class="musicName">后来的风 – 陆三三</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
					<li>
		                <a href="#" class="musicName">光亮 – 周深</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
					<li>
		                <a href="#" class="musicName">飞鸟与雾 – 余菲</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
					<li>
		                <a href="#" class="musicName">NOT ME – 404 RAPPER</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
					<li>
		                <a href="#" class="musicName">以无旁骛之吻 – 周深</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
					<li>
		                <a href="#" class="musicName">strawberry moon – IU</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
					<li>
		                <a href="#" class="musicName">扑面而来的雨 – 李阿彪</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
					<li>
		                <a href="#" class="musicName">DUMB DUMB – 全昭弥</a>
		                <a class="shareIcon" href="javascript:;"></a>
		                <a class="playIcon" href="javascript:;"></a>
		            </li>
				</ul>
		    </div>
		</div>
		<div class="cont">
		<h2 style="margin-left: 20px; margin-top: 26px;">——热门歌手——</h2>
		</div>
		<div class="omnibus hot_singer">
			<div class="hot_singer_cont new_common">
			    <div class="hot_singer_title new_common_title">
			        <span></span>
			        <a href="#" class="more"></a>
			    </div>
			    <ul class="singer_list">
			        <li>
			            <a href="#" class="singerPhoto">
			                <img src="images/fot1.jpg" alt="" width="100" height="100"></a>
			            <a href="#" class="singer">张杰</a>
			        </li>
			        <li>
			            <a href="#" class="singerPhoto">
			                <img src="images/fot2.jpg" alt="" width="100" height="100"></a>
			            <a href="#" class="singer">陈奕迅</a>
			        </li>
			        <li>
			            <a href="#" class="singerPhoto">
			                <img src="images/fot3.jpg" alt="" width="100" height="100"></a>
			            <a href="#" class="singer">许嵩</a>
			        </li>
			        <li>
			            <a href="#" class="singerPhoto">
			                <img src="images/fot4.jpg" alt="" width="100" height="100"></a>
			            <a href="#" class="singer">周杰伦</a>
			        </li>
			        <li>
			            <a href="#" class="singerPhoto">
			                <img src="images/fot5.jpg" alt="" width="100" height="100"></a>
			            <a href="#" class="singer">林俊杰</a>
			        </li>
			        <li>
			            <a href="#" class="singerPhoto">
			                <img src="images/fot6.jpg" alt="" width="100" height="100"></a>
			            <a href="#" class="singer">邓紫棋</a>
			        </li>
			        <div style="clear:both;"></div>
			    </ul>
			    <ul class="singer_classify">
			        <li><a href="#" class="singer">华语男歌手</a></li>
			        <li><a href="#" class="singer">华语女歌手</a></li>
			        <li><a href="#" class="singer">华语女组合</a></li>
			        <li><a href="#" class="singer">日韩男歌手</a></li>
			        <li><a href="#" class="singer">日韩女歌手</a></li>
			        <li><a href="#" class="singer">日韩组合</a></li>
			        <li><a href="#" class="singer">欧美男歌手</a></li>
			        <li><a href="#" class="singer">欧美女歌手</a></li>
			        <li><a href="#" class="singer">欧美组合</a></li>
			    </ul>
			</div>
		</div>
		<div class="fot" style="margin-top: -220px;">
			<div class="footer">Copyright © Your Website.com.  All rights reserved. Privacy Policy.<br />
		</div>
		</div>
		
	</body>
</html>
